<%-- 
    Document   : search
    Created on : 25/Abr/2009, 16:45:04
    Author     : sdinis
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <link type="text/css" href="resources/css/smoothness/jquery-ui-1.7.1.custom.css" rel="stylesheet" />
        <link rel="stylesheet" media="screen" href="resources/css/jquery.timepickr.css" type="text/css" />
        <link rel="stylesheet" media="screen" href="resources/css/jquery.rating.css" type="text/css" />

        <link type="text/css" href="resources/css/carpool.css" rel="stylesheet" />
        <title>Aproveitar Boleia</title>

        <script type="text/javascript" src="resources/js/jquery-1.3.2.js"></script>
        <script type="text/javascript" src="resources/js/jquery-ui-1.7.1.custom.min.js"></script>
        <script type="text/javascript" src="resources/js/carpool.js"></script>
        <script type="text/javascript" src="resources/js/jquery.timepickr.js"></script>
        <script type="text/javascript" src="resources/js/jquery.jmap.js"></script>
        <script type="text/javascript" src="resources/js/jquery.rating.js"></script>

        <script type="text/javascript">


            $(document).ready( function() {

                $("#ui-tabs-nav").tabs();
            });

        </script>

        <style type="text/css">

                       #down {
                           width:25px;
                           height:25px;
                           position:relative;
                           top: -2px;
                           left: -480px;
                           text-indent:-9999px;
                           overflow:hidden;
                           border:0;
                           background:url(resources/images/login_btn.gif) no-repeat 0 0;
                           display:block;
                           float:right;
                           cursor:pointer !important; cursor:auto;
                       }

                       #down:hover {
                           background:url(resources/images/login_btn_over.gif) no-repeat 0 0;
                       }


        </style>

    </head>
    <body>
        <div id="ui-tabs-nav" style="height: 430px; width: 520px; background:transparent; left: 10px;">
            <ul>
                <li><a href="#fragment-1"><span>pesquisa</span></a></li>

                <li><a href="#fragment-3"><span>resultados da pesquisa</span></a></li>
                <li><a href="#fragment-4"><span>confirmação</span></a></li>
            </ul>
            <form id="procura" method="post">
            <input name="operation" value="search" style="visibility:hidden;"/>
            <div id="fragment-1">
                <!--<script type="text/javascript">
                    $(function() {
                        $("#datepicker2").datepicker();
                    });


                    $(function(){
                        $('#test-1').timepickr();
                    });
                </script>
                <div class="demo" id="demo">


                    <p><input id="datepicker2" type="text" value="data"></p>
                    <p><input id="test-1" type="text" value="hora de partida"></p>

                </div>

                <div style="display: none;" class="demo-description">

                    <p>The datepicker is tied to a standard form input field.  Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay.  Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.</p>

                </div>




                <div id="o">
                    Origem
                </div>
                <div id="d">
                    Destino
                </div>
                <input type="text" id="origem" name="origem" onKeyUp="lookUser(this.value);"/>

                <div class="suggestionsBox" id="suggestions" style="display: none;">
                    <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
                    <div class="suggestionList" id="autoSuggestionsList">

                    </div>
                </div>
                <input type="text" id="destino" name="destino" onKeyUp="lookUser(this.value);"/>

                <div class="suggestionsBox" id="suggestions" style="display: none;">
                    <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
                    <div class="suggestionList" id="autoSuggestionsList">

                    </div>
                </div>-->
                <script type="text/javascript">
                    $(function() {
                        $("#pontos").sortable({
                            revert: true
                        });
                        $("ul, li").disableSelection();
                    });
                </script>

                <ul id="pontos">
                    <li id="ponto1" class="ui-state-default">Ponto de Passagem: <input type="text" value=""><a href="#" onclick='$("ul#pontos li#ponto1").remove();'>x</a></li>
                    <li id="ponto2" class="ui-state-default">Ponto de Passagem: <input type="text" value=""><a href="#" onclick='$("ul#pontos li#ponto2").remove();'>x</a></li>
                </ul>
                <script type="text/javascript">
                    var c = 3;

                    function adicionarPonto() {
                        var ul = document.getElementById('pontos');
                        var nLi = document.createElement('li');
                        var nLiId = 'ponto'+c;
                        nLi.setAttribute('id',nLiId);
                        nLi.setAttribute('class','ui-state-default');
                        var html = 'Ponto de Passagem: <input type="text" value="" /><a href="#" onclick=\'$("ul#pontos li#ponto'+c+'").remove();\'>x</a>';
                        nLi.innerHTML = html;
                        ul.appendChild(nLi);
                        c = c + 1;
                    }
                </script>
                <a href="#" onclick="adicionarPonto()">Adicionar nova paragem</a>
                <button id="query-submit-1">Encontre o caminho</button>

                <div class="suggestionsBox" id="suggestions" style="display: none;">
                    <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
                    <div class="suggestionList" id="autoSuggestionsList">

                    </div>
                </div>
                <div id="mapa" class="jmap"></div>
                <div id="direccoes"></div>

                <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;&div=mapa&key=ABQIAAAApCYnM8S-TSRBhQk16Ynr4BTpH3CbXHjuCVmaTc5MkkU4wO1RRhTDHHVxsVRxIzxPFaQpyblxObvHbw" type="text/javascript"></script>
                <script type="text/javascript">

                    function preencherMapa(data){

                        $("marker", data).each(function(){
                            lat = $("lat", this).text();
                            lon = $("lon", this).text();
                            $('#mapa').jmap('AddMarker',{
                                'pointLatLng':[lat, lon],
                                'pointHTML': '<a href="#" onclick="carregarBoleia()">Ver boleia</a>'
                            });

                        });
                    }

                    function procurarBoleias(){

                        var form = document.getElementById('procura');

                        var oUl = document.getElementById('pontos');
                        var oLi = oUl.getElementsByTagName('li');
                        for(var c = 0; c<oLi.length; c++){
                            var input = oLi[c].getElementsByTagName('input');
                            var address = input[0].value + ',Coimbra';

                            jQuery('#mapa').jmap('SearchAddress', {
                                'query': address,
                                'returnType': 'getLocations'
                            }, function(result, options) {
                                var valid = Mapifies.SearchCode(result.Status.code);
                                if (valid.success) {
                                    jQuery.each(result.Placemark, function(i, point){
                                            jQuery('#mapa').jmap('AddMarker',{
                                            'pointLatLng':[point.Point.coordinates[1], point.Point.coordinates[0]],
                                            'pointHTML':point.address
                                        });
                                        jQuery("#mapa").jmap('MoveTo',{
                                           'mapCenter': [point.Point.coordinates[1], point.Point.coordinates[0]],
                                           'centerMethod': 'pan'
                                        });
                                        var inputPoint = document.createElement('input');
                                        inputPoint.setAttribute('value',point.Point.coordinates[1] + "," + point.Point.coordinates[0]);
                                        inputPoint.setAttribute('name', 'coordenadas[]');
                                        inputPoint.setAttribute('type', 'text');
                                        inputPoint.setAttribute('style', 'visibility:hidden');
                                        form.appendChild(inputPoint);

                                        $.post("RideServlet", {
                                            operation: "search",
                                            lat: point.Point.coordinates[1],
                                            lon: point.Point.coordinates[0]
                                        }, function(data){
                                            preencherMapa(data);
                                        });
                                    });
                                } else {
                                jQuery('#address').val(valid.message);
                                }
                            });

                        }
                        return false;
                    }

                    function carregarBoleia(){
                    
                    }

                    function ready(){
                        jQuery('#mapa').jmap('init', {'mapType':'hybrid','mapCenter':[40.211491, -8.429201]});
                        jQuery('#query-submit-1').click(procurarBoleias);

                    }

                    jQuery(document).ready(ready);

                </script>
            </div>

            <div id="fragment-3">
                <div id="result"style="">

                    <div id="nome_res"style="" >
                        <input type="button" onclick="expandRes(this, 'detalhes_res')" class="colapsed" id="down" name="commit" value=""  />
                        
                        <input type="text" readonly="yes" id="nome_res" name="nome_res" style="width: 300px; border-width: 0.5px; border-style: dotted;"/>
                        <div id="stars" style="top: 62px; left: 330px; position:absolute;">
                            <input name="star1" type="radio" class="star" disabled="disabled"/>
                            <input name="star1" type="radio" class="star" disabled="disabled"/>
                            <input name="star1" type="radio" class="star" disabled="disabled"/>
                            <input name="star1" type="radio" class="star" disabled="disabled"/>
                            <input name="star1" type="radio" class="star" disabled="disabled"/>
                        </div>
                    </div>
                    <div id="detalhes_res"style="display:none;">
                        <div id="o"style="top: 98px;">
                            Marca
                        </div>

                        <input type="text" id="marca12" readonly="yes" name="marca12" style="top: 112px;"/>

                        <div id="o"style="top: 138px;">
                            Modelo
                        </div>

                        <input type="text" id="modelo12" readonly="yes" name="modelo12" style="top: 152px;"/>

                        <div id="o" style="top: 98px; left:200px;">
                            Ano
                        </div>

                        <input type="text" id="ano12" name="ano12" readonly="yes" style="left:200px; top: 112px;"/>

                        <div id="o" style="top: 98px; left:370px;">
                            Matricula
                        </div>

                        <input type="text" id="matricula12" readonly="yes" name="matricula12" style="left:370px; width: 130px; top: 112px;"/>

                        <div id="o" style="top: 138px; left:200px;">
                            Cor
                        </div>

                        <input type="text" id="cor12" readonly="yes" name="cor12" style="left:200px; top: 152px;" />

                        <input type="button" onclick="fillConfirmacao()" class="button" name="commit" value="Seleccionar boleia" style="top: 175px; background:white; left: 365px; position:absolute;" />
                    </div>

                </div>
            </div>

            <div id="fragment-4">
                <div id="o"style="top: 78px;">
                    Rendevú
                </div>
                <input type="text" id="partida" readonly="yes" name="partida" style="top: 90px;"/>

                <div id="foto">
                </div>

                <div id="o"style="top: 118px;">
                    Ponto de chegada
                </div>
                <input type="text" id="chegada2" readonly="yes" name="chegada2"/>


                <div id="o"style="top: 178px;">
                    Data
                </div>
                <input type="text" id="data" readonly="yes" name="data"/>
                <!--<input type="button" onclick="fillConfirmacao()" value="BOTAO"/>-->

                <div id="o"style="top: 218px;">
                    Hora de partida
                </div>
                <input type="text" readonly="yes" id="hora_p" name="hora_p" style="top: 230px;" />

                <div id="o"style="top: 218px; left: 250px;">
                    Hora de chegada
                </div>
                <input type="text" readonly="yes" id="hora_c" name="hora_c" style="top: 230px;" />

                <div id="o"style="top: 298px;">
                    Marca
                </div>

                <input type="text" readonly="yes" id="marca12" name="marca12"/>

                <div id="o"style="top: 338px;">
                    Modelo
                </div>

                <input type="text" readonly="yes" id="modelo12" name="modelo12" style="top: 352px;"/>

                <div id="o" style="top: 298px; left:200px;">
                    Ano
                </div>

                <input type="text" readonly="yes" id="ano12" name="ano12" style="left:200px;"/>

                <div id="o" style="top: 298px; left:370px;">
                    Matricula
                </div>

                <input type="text" readonly="yes" id="matricula12" name="matricula12" style="left:370px; width: 130px;"/>

                <div id="o" style="top: 338px; left:200px;">
                    Cor
                </div>

                <input type="text" readonly="yes" id="cor12" name="cor12" style="left:200px; top: 352px;" />
                <input type="button" class="button" name="commit" value="Confirmar pedido" style="top: 380px; background:white; left: 370px; position:absolute;" />

            </div>
        </div>


    </body>
</html>

